<!--
    * Time    : 2021-03-15 10:28:55
    * Author  : zhangTj
    * Desc    : 调查问卷列表页
-->

<template>
    <div class="w750">
        <van-list
            v-if="!paging.emptylist"
            v-model="paging.loading"
            :finished="paging.finished"
            :immediate-check="false"
            finished-text="没有更多了"
            @load="loadMore"
        >
            <div
                v-for="(item, index) in list"
                :key="index"
                @click="$toPage('questionnaireTap', { questionnaireId: item.questionnaireId, id: item.id })"
                class="d-flex bg-fff a-center p-1 border-bottom"
            >
                <span class="flex-1 line-clamp1">{{ item.title }}</span>
                <i class="iconfont iconArrowRight" style="font-size: 14px"></i>
            </div>
        </van-list>
        <Noempty
            v-if="(paging.emptylist || paging.error) && !partLoading"
            :pic="require('@/assets/images/personal-no-good.png')"
            title="暂无调查问卷"
        />

        <part-loading v-model="partLoading" backgroundColor="#fff" height="400px" size="24px" :color="themes.color" />
    </div>
</template>

<script>
import { questionnaireApi } from '@/api/questionnaire'
import PageUtil from 'utils/PageUtil'
import Noempty from '@/components/Noempty/Noempty'
import PartLoading from '@/components/PartLoading/PartLoading'
import { mapState } from 'vuex'

const pageUtil = new PageUtil(questionnaireApi.questionnairePage)

export default {
    name: 'questionnaireList',
    components: { Noempty, PartLoading },
    data() {
        return {
            partLoading: true,
            paging: {
                tab: true,
                loading: false,
                finished: false,
                error: false, // 是否错误
                emptylist: false // 是否显示列表为空时的样式
            },
            list: [],
            params: {
                pageSize: 40
            }
        }
    },
    computed: {
        ...mapState(['themes'])
    },
    watch: {},
    created() {},
    destroyed() {},
    mounted() {
        pageUtil.loadListByPage(this, this.params, {
            complete: () => {
                this.partLoading = false
            }
        })
    },
    methods: {
        loadMore() {
            pageUtil.loadListByPageMore(this.params)
        }
    }
}
</script>

<style lang="scss" scoped></style>
